<template>
  <div class="layout">
    <!-- 侧边栏 -->
    <div class="sidebar" v-if="!isLoginPage">
      <h2>菜单导航</h2>
      <ul class="menu-list">
        <li 
          v-for="item in menuItems" 
          :key="item.key"
          :class="{ active: currentMenu === item.key }"
          @click="handleMenuClick(item)"
        >
          {{ item.label }}
        </li>
      </ul>
    </div>
    
    <!-- 主内容区域 -->
    <div class="main-content" :class="{ 'full-width': isLoginPage }">
      <div class="header" v-if="!isLoginPage">
        <h1>主应用</h1>
        <!-- 添加退出登录按钮 -->
        <div class="header-right">
          <span class="username" v-if="userInfo?.username">{{ userInfo.username }}</span>
          <button class="logout-btn" @click="handleLogout">退出登录</button>
        </div>
      </div>
      
      <!-- 路由视图 -->
      <router-view></router-view>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRouter } from 'vue-router'
import { clearAuth, getUserInfo } from '@/utils/auth'

const router = useRouter()
const route = router.currentRoute

// 判断是否是登录页
const isLoginPage = computed(() => route.value.path === '/login')

// 判断是否是子应用路径
const isSubAppRoute = (path: string) => {
  return path.startsWith('/sub/')
}

const userInfo = ref(getUserInfo())

// 退出登录处理函数
const handleLogout = () => {
  // 清除认证信息
  clearAuth()
  // 跳转到登录页
  router.push('/login')
}

// 菜单配置
const menuItems = [
  { key: 'sub/dashboard', label: '子应用控制台', url: 'http://localhost:8082/dashboard' },
  { key: 'sub/profile', label: '子应用个人信息', url: 'http://localhost:8082/profile' },
  { key: 'sub/settings', label: '子应用设置', url: 'http://localhost:8082/settings' },
  { key: 'sub/analytics', label: '子应用数据分析', url: 'http://localhost:8082/analytics' },
]

// 当前选中的菜单
const currentMenu = ref('')

// 监听路由变化
watch(() => route.value.path, (path) => {
  if (isSubAppRoute(path)) {
    const menuItem = menuItems.find(item => item.key === path.slice(1)) // 去掉开头的/
    if (menuItem) {
      currentMenu.value = menuItem.key
    }
  }
}, { immediate: true })

// 菜单点击处理
const handleMenuClick = (item: typeof menuItems[0]) => {
  router.push('/' + item.key)
}
</script>

<style scoped>
.layout {
  display: flex;
  width: 100%;
  height: 100vh;
}

.sidebar {
  width: 200px;
  background-color: #001529;
  color: white;
  padding: 20px 0;
}

.sidebar h2 {
  padding: 0 20px;
  margin-bottom: 20px;
}

.menu-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-list li {
  padding: 12px 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.menu-list li:hover {
  background-color: #1890ff;
}

.menu-list li.active {
  background-color: #1890ff;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.main-content.full-width {
  width: 100%;
}

.header {
  height: 60px;
  background-color: white;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 20px;
  display: flex;
  align-items: center;
}

.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.username {
  margin-right: 10px;
  font-size: 14px;
  color: #333;
}

.logout-btn {
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #333;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 12px;
  transition: all 0.3s;
}

.logout-btn:hover {
  background-color: #ff4d4f;
  border-color: #ff4d4f;
  color: white;
}
</style> 